<template>
	<el-form ref="personalInfoForm" :model="personalInfoForm" :rules="personalInfoRules" label-width="80px" class="personal-info">
	  	<el-form-item style="margin-right: 24%;">
			<el-upload class="avatar-uploader" :action="'/api/doc/avatar/employee/' + user.empID + '?num=' + Math.random()" :show-file-list="false" :on-success="handleAvatarSuccess">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>
	  	<el-form-item label="姓名">
	    	<el-input v-model="personalInfoForm.EmpName" disabled></el-input>
	  	</el-form-item>
	  	<el-form-item label="电话" prop="Mobile">
	    	<el-input v-model="personalInfoForm.Mobile"></el-input>
	  	</el-form-item>
	  	<el-form-item label="部门">
	    	<el-input v-model="personalInfoForm.Orgname" disabled></el-input>
	  	</el-form-item>
	  	<el-form-item label="职务" v-if="personalInfoForm.Titles">
			<p style="margin: 0;" v-for="item in personalInfoForm.Titles">{{item.Dept}} - {{item.Title}}</p>
		</el-form-item>
	  	<el-form-item>
	    	<el-button type="primary" @click.native="fnUpdateUser">保存更新</el-button>
	  	</el-form-item>
	</el-form>
</template>

<script>
    import Svc from '../../service/index.js'
	export default {
		data() {
			//验证电话号码
	      	var checkMobile = (rule, value, callback) => {
	      		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
	        	if (value === '') {
          			callback(new Error('请输入申请人联系电话！'));
        		} else if (!reg.test(value)) {
	          		callback(new Error('请输入有效的手机号码！'));
	        	} else {
	          		callback();
	        	}
	      	};
			
			return {
				user : {
					empID : '',
					empName : '',
				},
				imageUrl : '', //头像（显示用）
				//用户信息数据
				personalInfoForm: {
					Photo : '', //头像（保存用）
					Mobile : '',
					Orgname : ''
				},
				personalInfoRules: {
		          	Mobile: [
		            	{ required: true, validator: checkMobile,  trigger: 'blur' }
		          	]
		        }
			}
		},
		methods: {
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
			//获取当前用户信息
			fnGetCurUserInfo : function() {
				var that = this
	            Svc.fnGetData('/api/profile/detail',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.imageUrl = res.body.Data.Photo
	            		that.personalInfoForm = res.body.Data
	            		//不更新时传空
	            		that.personalInfoForm.Photo = ""
	            	} else {
	            		that.openMessage('用户信息获取失败！','error')
	            	}
	            },function(res){
	            	that.openMessage('网络错误，请重新！','error')
	            })
			},
		    //添加领导照片成功
	        handleAvatarSuccess(res, file) {
	        	this.imageUrl = URL.createObjectURL(file.raw);
	        	this.personalInfoForm.Photo = res.Data.Key
	      	},
			//保存更新
			fnUpdateUser : function() {
				var that = this
				var params = {
					Photo : that.personalInfoForm.Photo,
					Mobile : that.personalInfoForm.Mobile
				}
				
	            Svc.fnPostData('/api/profile/update',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.openMessage('个人信息更新成功！','success')
	            	} else {
	            		that.openMessage(res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage('网络错误，请重新！','error')
	            })
			}
		},
		mounted() {
			//获取登录信息
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.user.empName = user.EmpName || '';
				this.user.empID = user.EmpID || '';
			}
			
			//获取当前用户信息
			this.fnGetCurUserInfo()
		}
	}

</script>

<style scoped>
	.personal-info{
		margin:20px;
		width:40%;
		min-width:500px;
	}
	.avatar-uploader {
	    width: 150px;
    	height: 200px;
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader:hover {
	    border-color: #409EFF;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 150px;
	    height: 200px;
	    line-height: 200px;
	    text-align: center;
	}
	.avatar {
	    width: 150px;
	    height: 200px;
	    display: block;
	}
</style>